<template>
	<div class="mt-4" v-loading="data.mtloading">
		<el-form ref="formRef" :model="data.userinfo" :label-width="language == 'en' ? '120px' : '100px'">
			<el-form-item :label="$t('system.system.reset')">
				<el-input v-model="data.userinfo.password" class="input_width"
					:placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" v-prmis="'updatePassword'">{{ $t('public.ok') }}</el-button>
				<el-button @click="onCancel">{{ $t('public.cancel') }}</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { updatePassword } from '@/api/user';
import useUserStore from '@/store/user'
import { useRouter } from 'vue-router';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let emit = defineEmits(['infoData'])
const router = useRouter()
let data = reactive({
	mtloading: false,
	userinfo: {
		manager_id: '',
		password: '',
	}
})

let onSubmit = () => {
	const user = useUserStore().name
	data.userinfo.manager_id = user.manager_id
	if (data.userinfo.password == '') {
		ElMessage({
			message: $t('message.enterloginPass'),
			type: 'error'
		})
		return
	}
	updatePassword(data.userinfo).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.modifySuccess'),
				type: 'success'
			})
			useUserStore().logout().then(() => {
				router.push('/login')
			})
			return
		}
	})
}

let onCancel = () => {
	data.userinfo.password = ''
}


</script>

<style lang="scss" scoped>
.input_width {
	width: 600px;
}
</style>